<template>
  <div class="box">
    <div class="page-center">
      <a-page-header
        title="订单管理"
        @back="() => $router.back()"
        style="padding: 10px 0"
      />
      <div class="list">
        <a-table
          :dataSource="dataSource"
          :columns="columns"
          :pagination="false"
          :loading="loading"
          rowKey="id"
        >
          <template #title>
            <span style="padding-left: 20px">订单记录</span>
          </template>
          <template #team_id="{ record }">
            <span>{{ record.team_id ? "团队" : "个人" }}</span>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, watch, toRaw } from "vue";
import { useRoute, useRouter } from "vue-router";
import request from "../../common/utils/request";

export default defineComponent({
  name: "Order",
  setup() {
    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      count: 0,
      name: "",
      orderNumbebr: "",
      loading: false,
      dataSource: [],
      columns: [
        {
          title: "订单号",
          dataIndex: "order_id",
          align: "center",
          width: "25%",
        },
        {
          title: "订单金额",
          dataIndex: "order_money",
          align: "center",
          width: "10%",
        },
        {
          title: "支付方式",
          dataIndex: "pay_method_txt",
          align: "center",
          width: "10%",
        },

        {
          title: "支付金额",
          dataIndex: "pay_money",
          align: "center",
          width: "10%",
        },
        {
          title: "套餐类型",
          slots: {
            customRender: "team_id",
          },
          align: "center",
          width: "10%",
        },
        {
          title: "购买时间",
          dataIndex: "pay_time",
          align: "center",
          width: "15%",
        },
        {
          title: "订单状态",
          dataIndex: "order_status_txt",
          align: "center",
          width: "10%",
        },
      ],
    });

    const getOrderList = () => {
      state.loading = true;
      request.get("/work_ai", "/order/list").then((res) => {
        state.dataSource = res.list;
        state.loading = false;
      });
    };
    getOrderList();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  //   padding: 10px 30px;

  .page-center {
    margin: 0 auto;
    max-width: 1200px;

    .list {
      border-radius: 6px;
      overflow: hidden;
    }
  }
}
</style>
